<template>
  <div class="artist">
    <div class="option">
      <div v-for="(value, keys, index) in option" :key="keys">
        <span> {{ keys }}</span>
        <p
          v-for="(v, i) in value"
          :key="v"
          :class="{ active: option[keys][i] === optionActive[index] }"
          @click="handleActive(index, v)"
        >
          {{ v }}
        </p>
      </div>
    </div>
    <gridList :gridListInfo="artists" width="15%" borderRadius="10px" />
    <pagination :continuous="5" :active="active" :all="50" @getActive="getActive" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useSendReq } from "@/store/sendReq";
import { useThemeColor } from "@/store/themeColor";
import gridList from "@/components/gridList.vue";
import pagination from "@/components/pagination.vue";
const themeColor = useThemeColor();
const sendReq = useSendReq();
const optionActive = reactive(["全部", "全部", "热门"]);
const artists = reactive<artistsTYPE[]>([]);
const active = ref<any>(1);

const option: Record<string, string[]> = {
  语种: ["全部", "华语", "欧美", "日本", "韩国", "其他"],
  分类: ["全部", "男歌手", "女歌手", "乐队"],

  筛选: [
    "热门",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "#",
  ],
};
let params: Record<string, string | number> = {
  area: "-1",
  type: "-1",
  initial: "-1",
  limit: "30",
  offset: 1,
};
const handleActive = (index?: number, v?: string) => {
  v && (optionActive[index!] = v);
  let a: Record<number, any> = {
    0: [
      { value: -1, content: "全部" },
      { value: 7, content: "华语" },
      { value: 96, content: "欧美" },
      { value: 8, content: "日本" },
      { value: 16, content: "韩国" },
      { value: 0, content: "其他" },
    ],
    1: [
      { value: -1, content: "全部" },
      { value: 1, content: "男歌手" },
      { value: 2, content: "女歌手" },
      { value: 3, content: "乐队" },
    ],
    2: [
      { value: -1, content: "热门" },
      { value: 0, content: "#" },
    ],
  };

  v &&
    a[index!].forEach((c: { value: number; content: string }) => {
      let b = ["area", "type", "initial"];
      if (c.content == optionActive[index!]) params[b[index!]] = c.value;
      // abc的情况
      if (index == 2 && c.content != v) params.initial = v;
    });
  sendReq.getReqArtist(params).then((res) => {
    artists.length = 0;
    artists.push(...res.artists);
  });
};
// 分页器
const getActive = (num: number | string) => {
  active.value = num;
  params.offset = num;
  handleActive();
};
handleActive();
</script>

<style scoped lang="less">
.active {
  color: v-bind("themeColor.themeFontColor");
}
.option {
  padding-top: 20px;
  box-sizing: border-box;
  > div {
    display: flex;
    font-size: 18px;

    span {
      margin-right: 20px;
    }
    p {
      width: 80px;
      height: 30px;
    }
    P:hover {
      cursor: pointer;
    }
  }
  > div:nth-child(3) {
    > p {
      margin: 0 15px 0 0;
      width: fit-content;
    }
  }
}
</style>
